<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>商品分类</title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			body{

				background-color: #D5D5D5;

			}

			.box{

				background-color: white;

				width: 230px;

				margin: 10px;

			}

			.box h2{

				background-color: black;

				color: white;

				font-size: 16px;

			}

			.box dl dt{

				height: 30px;

				line-height: 30px;

				list-style: none;

				font-weight: bold;

				font-size: 14px;

				padding-left: 26px;

			}

			.box dl dd{

				background-color: #FFFFFF;

				padding-left: 24px;

				line-height: 20px;

				border-bottom: 1px dashed black;

			}

			.box dl dd:last-of-type{

				border: 0;

			}

			.box dl dd a{

				text-decoration:none;

				color: #737373;

				text-indent:2em;

				font-size: 12px;

			}

			.box dl dt:nth-of-type(1){

				background-image: url(icon_01.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(2){

				background-image: url(icon_02.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(3){

				background-image: url(icon_03.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(4){

				background-image: url(icon_04.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(5){

				background-image: url(icon_05.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(6){

				background-image: url(icon_06.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(7){

				background-image: url(icon_07.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(8){

				background-image: url(icon_08.gif);

				background-repeat: no-repeat;

			}

			.box dl dt:nth-of-type(9){

				background-image: url(icon_09.gif);

				background-repeat: no-repeat;

			}

		</style>

	</head>

	<body>

		<div class="box">

			<h2>全部分类</h2>

			<dl>

				<dt>护肤</dt>

					<dd>

						<p>

							<a href="#">洁面</a>

							<a href="#">化妆水</a>

							<a href="#">喷雾</a>

							<a href="#">美容液</a>

							<a href="#">眼霜</a>

						</p>

						<p>						

							<a href="#">眼部精华</a>

							<a href="#">眼膜</a>

							<a href="#">面膜</a>

							<a href="#">面膜贴</a>

						</p>

						<p>

							<a href="#">水洗面膜</a>

							<a href="#">免洗面膜</a>

							<a href="#">精华</a>

							<a href="#">精油</a>

						</p>

						<p>

							<a href="#">凝露</a>

							<a href="#">乳液</a>

							<a href="#">面霜</a>

							<a href="#">日霜</a>

							<a href="#">晚霜</a>

						</p>

					</dd>

				<dt>彩妆</dt>

					<dd>

						<p>

							<a href="#">卸妆</a>

							<a href="#">防晒</a>

							<a href="#">隔离</a>

							<a href="#">BB霜</a>

							<a href="#">粉底</a>

							<a href="#">粉饼</a>

						</p>

						<p>

							<a href="#">睫毛膏</a>

							<a href="#">眼影</a>

							<a href="#">唇彩</a>

							<a href="#">腮红</a>

							<a href="#">眼线笔</a>

						</p>

						<p>

							<a href="#">底妆</a>

							<a href="#">遮瑕</a>

							<a href="#">蜜粉</a>

							<a href="#">眉笔</a>

							<a href="#">美甲</a>

						</p>

					</dd>					

				<dt>香氛</dt>

					<dd>

						<p>

							<a href="#">男香</a>

							<a href="#">女香</a>

							<a href="#">小Q装</a>

							<a href="#">中性香水</a>

						</p>

					</dd>					

				<dt>身体护理</dt>

					<dd>

						<p>

							<a href="#">洗发</a>

							<a href="#">护发</a>

							<a href="#">沐浴</a>

							<a href="#">身体乳</a>

							<a href="#">手足护理</a>

						</p>

						<p>

							<a href="#">护手霜</a>

							<a href="#">纤体</a>

							<a href="#">身体精油</a>

							<a href="#">颈部护理</a>

						</p>

						<p>

							<a href="#">个人护理</a>

							<a href="#">卫生用品</a>

							<a href="#">脱毛</a>

						</p>	

					</dd>			

				<dt>礼盒套装</dt>

					<dd>

						<p>

							<a href="#">护肤套装</a>

							<a href="#">身体护理套装</a>

							<a href="#">彩妆套装</a>

						<p>

						<p>

							<a href="#">旅行装</a>

							<a href="#">香水套装</a>

							<a href="#">男士套装</a>

						</p>

					</dd>	

				<dt>美容工具</dt>

					<dd>

						<p>

							<a href="#">护肤</a>

							<a href="#">彩妆</a>

							<a href="#">美发</a>

							<a href="#">美体</a>

							<a href="#">美甲</a>

						<p>

						<p>

							<a href="#">美容仪器</a>

							<a href="#">其他美容工具</a>

						</p>

					</dd>	

				<dt>母婴专区</dt>

					<dd>

						<p>

							<a href="#">奶粉</a>

							<a href="#">尿裤湿巾</a>

							<a href="#">母婴洗护</a>

						</p>

					</dd>	

				<dt>男士专区</dt>

					<dd>

						<p>

							<a href="#">洁面</a>

							<a href="#">爽肤水</a>

							<a href="#">面霜</a>

							<a href="#">男香</a>

						<p>

						<p>

							<a href="#">眼霜</a>

							<a href="#">凝胶</a>

							<a href="#">乳液</a>

							<a href="#">精华</a>

							<a href="#">沐浴</a>

						</p>

					</dd>	

				<dt>食品保健</dt>

					<dd>

						<p>

							<a href="#">瘦身类</a>

							<a href="#">保健类</a>

							<a href="#">美容类</a>

							<a href="#">食品类</a>

						</p>

					</dd>	

			</dl>

		</div>

	</body>

</html>


